<template>
	<div class="charts-box">
		<qiun-data-charts type="tarea" :opts="opts" :chartData="chartData" />
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		Solar,
		Guang
	} from '@/utils/file.js';

	const chartData = ref({});


	const opts = {
		color: ["#1890FF", "#7931cb", "#FAC858","#ff59f7", "#7931cb", "#FAC858"],
		padding: [15, 15, 0, 15],
		dataLabel: false,  //取消数字
		dataPointShape: false,  //取消折现点
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			data:[{
				min: 0,
				max: 1.5,
			}],
			splitNumber: 6
		},
		extra: {
			area: {
				type: "curve",
				opacity: 0.5,
				addLine: true,
				gradient: true, // 使用渐变色
				width: 2,
				gradient: false,
				activeType: "hollow",
			}
		}
	};
	const getServerData = () => {
	  Solar(uni.getStorageSync('token')).then(res => { 
	    console.log(res, "功率");
	    setTimeout(() => {
	      let chartRes = {
	        categories: res.data.guangfu_result.gonglv.map(item=>item.power_time),
	        series: [
	          {
	            name: "实时功率",
	            data: res.data.guangfu_result.gonglv.map(item => item.power_num)
	          }
	        ]
	      };
	      chartData.value = JSON.parse(JSON.stringify(chartRes));
	    }, 500);
	  })
	};

	onMounted(() => {
		getServerData();
	});
</script>

<style scoped lang="scss">
	.charts-box {
		width: 100%;
		height: 300px;
	}
	
</style>